=
<template>
  <div class="app-container" style="min-width: 1300px">
    <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
      <!-- <px-form-item label="所属厂区">
        <px-select v-model="queryParams.level" placeholder="请选择" clearable style="width: 240px" filterable>
          <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.name" :value="dict.name" />
        </px-select>
      </px-form-item> -->
      <px-form-item label="核算模板">
        <px-select v-model="queryParams.templateId" placeholder="请选择" clearable style="width: 240px" filterable>
          <px-option v-for="dict in templateList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </px-select>
      </px-form-item>
      <px-form-item label="核算月份">
        <px-date-picker
          v-model="dateRange"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </px-form-item>
      <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery('search')">搜索</px-button>
      <px-button style="margin-top: -17px" @click="resetQuery">重置</px-button>
    </px-form>
    <px-row :gutter="10" class="mb8">
      <px-col :span="1.5">
        <px-button v-has="'ACCOUNTINGMANAGE_ADD'" type="primary" icon="" @click="handleAdd">填报</px-button>
      </px-col>
    </px-row>
    <px-table
      v-if="!addVisible && !detailVisible && !accountingVisible"
      v-loading="loading"
      :data="typeList"
      height="calc(100vh - 319px)"
      show-overflow-tooltip
      border
    >
      <px-table-column label="序号" fixed="left" type="index" width="70">
        <template #default="{ $index }">
          {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
        </template>
      </px-table-column>
      <px-table-column label="核算月份" prop="estimateMonth">
        <template #default="scope">
          <span>{{ scope.row.estimateMonth }}</span>
        </template>
      </px-table-column>

      <px-table-column label="核算模板" prop="templateName">
        <template #default="scope">
          <span>{{ scope.row.templateName }}</span>
        </template>
      </px-table-column>
      <px-table-column label="碳排放量（tCO₂e）" prop="carbonEmission">
        <template #default="scope">
          <span>{{ scope.row.carbonEmission }}</span>
        </template>
      </px-table-column>
      <px-table-column label="填报人" prop="estimiateByName">
        <template #default="scope">
          <span>{{ scope.row.estimiateByName }}</span>
        </template>
      </px-table-column>
      <px-table-column label="填报时间" prop="estimateTime">
        <template #default="scope">
          <span>{{ scope.row.estimateTime }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" align="center" width="140">
        <template #default="scope">
          <px-button v-has="'ACCOUNTINGMANAGE_DETAIL'" link type="primary" @click="handleDetail(scope.row.id)">
            <px-tooltip class="box-item" content="详情" placement="top">
              <px-icon>
                <Tickets />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="scope.row.status != 'INVALID'" v-has="'ACCOUNTINGMANAGE_EDITOR'" link type="primary" @click="handleEditor(scope.row.id)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon>
                <EditPen />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="scope.row.status != 'INVALID'" v-has="'ACCOUNTINGMANAGE_DELETE'" link type="danger" @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>
        </template>
      </px-table-column>
      <template #empty>
        <px-empty :image-size="150" />
      </template>
    </px-table>

    <pagination
      v-if="!equipopen && !equipopenDetail"
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-bottom: -10px"
      :total="total"
      @pagination="getList"
    />
    <!-- 添加核算管理 -->
    <px-dialog v-model="addtemplate" width="455" :close-on-click-modal="false" title="碳排放核算" align-center>
      <px-form v-show="showSearch" ref="detailruleFormRef" :model="addForm" :rules="rules2" :inline="true" label-width="80px">
        <px-row>
          <px-col :span="24">
            <px-form-item label="填报月份" prop="estimateMonth">
              <px-date-picker v-model="addForm.estimateMonth" style="width: 290px" type="month" value-format="YYYY-MM-DD HH:mm:ss" />
            </px-form-item>
          </px-col>
        </px-row>
        <!-- <px-row>
          <px-col :span="24">
            <px-form-item label="所属厂区" :maxlength="50" prop="level">
              <px-select v-model="addForm.level" placeholder="请选择" clearable style="width: 290px" filterable>
                <px-option v-for="dict in liquidList" :key="dict.id" :label="dict.name" :value="dict.name" />
              </px-select>
            </px-form-item>
          </px-col>
        </px-row> -->
        <px-row>
          <px-col :span="24">
            <px-form-item label="填报模板" :maxlength="50" prop="templateId">
              <px-select
                v-model="addForm.templateId"
                placeholder="请选择"
                clearable
                style="width: 290px"
                filterable
                @change="getaccountingTemplateAndTreeDetailDTO"
              >
                <px-option v-for="dict in templateList" :key="dict.id" :label="dict.name" :value="dict.id" />
              </px-select>
            </px-form-item>
          </px-col>
        </px-row>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="addtemplate = false">取消</px-button>
          <px-button type="primary" :loading="tianbaoLoading" @click="addTemplatename(detailruleFormRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
    <!-- 添加或修改参数配置对话框 -->
    <px-scrollbar v-if="addVisible" v-loading="accountingflg" class="addEquip" element-loading-text="核算数据中...">
      <px-button style="margin-left: 24px" type="primary" :icon="ArrowLeft" @click="equipopenDetailcancel">返回</px-button>
      <px-button style="float: right; margin-right: 16px" type="primary" plain icon="" @click="handleExport">导入</px-button>
      <px-button v-if="buttonTitle == '新增'" style="float: right; margin-right: 16px" type="primary" plain icon="" @click="handleSynchronization"
        >同步</px-button
      >
      <!-- <px-button type="primary" plain style="float: right; margin-right: 24px">导入</px-button>
      <px-button type="primary" plain style="float: right">同步</px-button> -->

      <div style="padding: 20px 20px 50px">
        <px-tabs v-model="activeName" class="equipment-tabs" @tab-change="setLve2">
          <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="index">
            <template #label>
              <p class="pane-bottom">{{ item.name }}</p>
              <p class="pane-line" />
            </template>
          </px-tab-pane>
        </px-tabs>
        <px-radio-group v-model="radio1" style="margin-top: 16px" @change="radioChange">
          <px-radio-button v-for="(items, index) in selectLv2?.children" :key="index" :label="items.name" />
        </px-radio-group>
        <div
          v-for="(item, index) in selectLv3"
          :key="index"
          class="box-card1"
          :style="{
            height: jibenxinxiFlg == index ? '' : '42px'
          }"
        >
          <div class="card-header" @click="setqingdanFlg(index)">
            <div class="card-title">{{ item.facilityName }}{{ item.serialNumber }}</div>
            <div class="card-main">
              <px-icon v-if="jibenxinxiFlg == index">
                <ArrowDown />
              </px-icon>
              <px-icon v-else>
                <ArrowUp />
              </px-icon>
            </div>
          </div>
          <div class="form-div">
            <px-descriptions class="margin-top" style="padding-bottom: 20px" title="" :column="2" border>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item">类别</div>
                </template>
                {{ item.category }}
              </px-descriptions-item>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item">排放因子</div>
                </template>
                {{ item.emissionFactorName }}
              </px-descriptions-item>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item">GHG种类</div>
                </template>
                {{ item.gasType }}
              </px-descriptions-item>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item">设施/活动类别</div>
                </template>
                {{ item.category }}
              </px-descriptions-item>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item"><span style="color: red">*</span>活动水平</div>
                </template>
                <px-input-number
                  v-model="item.activityLevel"
                  controls-position="right"
                  :max="999999999"
                  :precision="5"
                  style="width: 200px; margin-right: 8px"
                  @input="setactivityLevel(item)"
                />{{ item.activityLevelUnit }}
              </px-descriptions-item>
              <px-descriptions-item>
                <template #label>
                  <div class="cell-item"><span style="color: red">*</span>活动水平数据来源</div>
                </template>
                <px-select v-model="item.activityLevelSource" placeholder="请选择" clearable style="width: 240px" filterable>
                  <px-option v-for="dict in huodongList" :key="dict" :label="dict" :value="dict" />
                </px-select>
              </px-descriptions-item>
              <!-- <px-descriptions-item>
                <template #label>
                  <div class="cell-item">凭证材料</div>
                </template>
                <FileUpload
                  fileType="add"
                  :fileSize="50"
                  :countLimit="1"
                  fileAccept=".pdf"
                  fileTypeValue="pdf"
                  :fileData="{ moduleName: 'ACCOUNTING_MANAGE' }"
                  :fileList="item.documentIds"
                  @changeFileList="changeFileList"
                  @saveFileStatus="saveFileStatus"
                />
              </px-descriptions-item> -->
            </px-descriptions>
            <!-- <px-icon color="#3B82F6"><MinusRectangle /></px-icon> -->
            <div>
              <div style="margin-bottom: 10px">凭证材料</div>
              <FileUpload
                v-if="item.activityLevelSource != '缴费凭证'"
                fileType="add"
                :fileSize="10"
                :countLimit="1"
                fileAccept=".pdf"
                fileTypeValue="pdf"
                :fileData="{ moduleName: 'ACCOUNTING_MANAGE' }"
                :fileList="item.fileDTOS"
                @changeFileList="changeFileList(item)"
                @saveFileStatus="saveFileStatus"
              />
              <div v-else>
                <px-button type="primary" plain style="margin-bottom: 16px" @click="setpzfile(item)">选择缴费凭证</px-button>
                <FileUpload
                  fileType="view"
                  :fileSize="10"
                  :countLimit="1"
                  fileAccept=".pdf"
                  fileTypeValue="pdf"
                  :fileData="{ moduleName: 'ACCOUNTING_MANAGE' }"
                  :fileList="item.fileDTOS"
                  @changeFileList="changeFileList(item)"
                  @saveFileStatus="saveFileStatus"
                />
              </div>
            </div>
            <div class="mainlist" style="margin-top: 10px">
              <div class="mainlistTop">
                <px-icon style="margin-top: 4px; cursor: pointer" color="#3B82F6">
                  <AddRectangle />
                </px-icon>
                <p class="mainlistTopp">
                  碳排放量（tCO₂e）：<span style="color: #3b82f6">{{ item.totalCarbonEmission }}</span
                  ><span style="margin-left: 16px">环比</span>
                  <span v-if="item.monthOnMonthRatio != null">
                    <span v-if="item.monthOnMonthRatio > 0" style="margin-left: 8px; color: #f87171">{{ item.monthOnMonthRatio }}%</span>
                    <px-icon v-if="item.monthOnMonthRatio > 0" color="#F87171" style="font-size: 12px !important">
                      <Top />
                    </px-icon>
                    <px-icon v-if="item.monthOnMonthRatio >= 30" color="#f59e0b" style="font-size: 12px !important; cursor: pointer">
                      <px-tooltip class="box-item" effect="dark" content="环比变化超过30%" placement="top"> <WarningFilled /> </px-tooltip>
                    </px-icon>
                    <span v-if="item.monthOnMonthRatio < 0" style="margin-left: 8px; color: #10b981">{{ item.monthOnMonthRatio }}%</span>
                    <span v-if="item.monthOnMonthRatio == 0" style="margin-left: 8px; color: #000">{{ item.monthOnMonthRatio }}%</span>
                    <px-icon v-if="item.monthOnMonthRatio < 0" color="#10b981" style="font-size: 12px !important">
                      <Bottom />
                    </px-icon>
                  </span>
                  <span v-else> --</span>
                </p>
                <div>
                  <div v-for="(items, index) in item.gasTypeEmissionDTOS" :key="index" class="mianListbottom">
                    <p class="mianListbottomp" />
                    <p class="mianListbottomp2">
                      <span style="display: inline-block; width: 110px">{{ items.gasType }}排放因子：</span>
                      <span>{{ items.emissionFactorValue + " " }} </span>
                      <span style="display: inline-block; width: 250px; margin-left: 8px"> {{ item.factorUnit }}</span>
                      <span style="position: absolute; left: 500px">排放量（tCO₂e）：{{ Number(items.carbonEmission).toFixed(2) }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </px-scrollbar>
    <px-dialog v-model="pzVisible" title="选择缴费凭证" width="1600">
      <px-radio-group v-model="pzqueryParams.kind" class="tabSwitch" @change="tabSelectHandler">
        <!-- <px-radio-button v-has="`${item.permision}`" v-for="item in tabsOption" :key="item.name" :label="item.name">{{ item.label }}</px-radio-button> -->
        <px-radio-button label="electricity">电</px-radio-button>
        <px-radio-button label="water">水</px-radio-button>
        <px-radio-button label="ng">天然气</px-radio-button>
        <px-radio-button label="hotSteam">蒸汽/热水</px-radio-button>
        <px-radio-button label="gas">大宗气</px-radio-button>
        <px-radio-button label="diesel">柴油</px-radio-button>
      </px-radio-group>
      <px-table
        style="margin-top: 16px"
        :data="tableData"
        border
        show-overflow-tooltip
        height="400"
        :header-cell-style="{ background: '#e7eefb', color: '#000' }"
      >
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="period" label="费用周期" align="center" min-width="160" />
        <px-table-column prop="version" label="周期时间" align="center" min-width="300">
          <template #default="scope">
            <div>{{ scope.row.startTime }}-{{ scope.row.endTime }}</div>
          </template>
        </px-table-column>
        <px-table-column prop="calculateCost" label="计算费用" align="center" width="100" />
        <px-table-column prop="settlement" label="结算单费用" align="center" width="120" />
        <px-table-column label="结算单-计算费用" align="center" width="160">
          <template #default="scope">
            <div>{{ scope.row.settlement - scope.row.calculateCost }}</div>
          </template>
        </px-table-column>
        <px-table-column label="选择结算凭证" align="center">
          <template #default="scope">
            <px-button type="primary" @click="viewFileVisible(scope.row)">选择缴费凭证</px-button>
          </template>
        </px-table-column>
        <px-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <px-tag :type="scope.row.auditType == 'N' ? 'warning' : 'success'" class="mx-1" effect="dark">
              {{ scope.row.auditType == "N" ? "待核算" : "已核算" }}
            </px-tag>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <pagination
        v-show="pztotal > 0"
        v-model:page="pzqueryParams.pageNum"
        v-model:limit="pzqueryParams.pageSize"
        :total="pztotal"
        @pagination="getpzList"
      />
    </px-dialog>
    <px-scrollbar v-if="detailVisible" class="editorEquip">
      <px-button style="margin-left: 24px" type="primary" :icon="ArrowLeft" @click="equipopenDetailcancel">返回</px-button>
      <p class="detailP">基础信息</p>
      <px-descriptions class="margin-top" style="padding: 0 20px" title="" :column="2" border>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">所属厂区</div>
          </template>
          {{ equipdata.level }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">核算月份</div>
          </template>
          {{ equipdata.estimateMonth }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">核算模板</div>
          </template>
          {{ equipdata.templateName }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">填报人员</div>
          </template>
          {{ equipdata.estimiateByName }}
        </px-descriptions-item>
        <px-descriptions-item>
          <template #label>
            <div class="cell-item">填报时间</div>
          </template>
          {{ equipdata.estimateTime }}
        </px-descriptions-item>
      </px-descriptions>
      <div class="waterdom borderRidus first_width" style="margin-top: 16px; margin-bottom: 50px">
        <px-tabs v-model="activeName2" style="margin-bottom: 16px" @tab-change="handleTabClick">
          <px-tab-pane v-for="(item, index) in tabPaneList2" :key="index" :name="item.name">
            <template #label>
              <p class="pane-bottom">{{ item.label }}</p>
              <p class="pane-line" />
            </template>
          </px-tab-pane>
        </px-tabs>
        <div v-if="activeName2 == 'first'" style="padding-bottom: 20px">
          <modelTitle style="width: 500px" :title="'温室气体碳排放统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table
                  height="368px"
                  :data="equipdata.gasEmissionResultDTOS"
                  :summary-method="getSummaries"
                  show-summary
                  show-overflow-tooltip
                  border
                >
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.gasType }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParent :charttitle="'温室气体碳排放统计'" :chartValue="equipdata.gasEmissionResultDTOS" style="margin-top: 16px" />
              </px-col>
            </px-row>
          </div>
          <modelTitle style="width: 500px; margin-top: 20px" :title="'排放类别统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table height="448px" :data="equipdata.categoryDTOS" :summary-method="getSummaries" show-summary show-overflow-tooltip border>
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.category }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParentlei :charttitle="'排放类别统计'" :chartValue="equipdata.categoryDTOS" style="margin-top: 16px" height="448px" />
              </px-col>
            </px-row>
          </div>
          <modelTitle style="width: 500px; margin-top: 20px" :title="'子排放类别统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table height="448px" :data="equipdata.childCategoryDTOS" :summary-method="getSummaries" show-summary show-overflow-tooltip border>
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.category }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParentlei :charttitle="'子排放类别统计'" :chartValue="equipdata.childCategoryDTOS" style="margin-top: 16px" height="448px" />
              </px-col>
            </px-row>
          </div>
        </div>
        <div v-if="activeName2 == 'two'">
          <px-tabs v-model="activeName" class="equipment-tabs" @tab-change="setLve2">
            <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="index">
              <template #label>
                <p class="pane-bottom">{{ item.name }}</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
          </px-tabs>
          <px-radio-group v-model="radio1" style="margin-top: 16px" @change="radioChange">
            <px-radio-button v-for="(items, index) in selectLv2.children" :key="index" :label="items.name" />
          </px-radio-group>
          <px-table style="margin-top: 16px" :data="selectLv3" show-overflow-tooltip border>
            <!-- <px-table-column label="序号" align="center" prop="id" /> -->
            <px-table-column type="expand">
              <template #default="props">
                <div m="4">
                  <px-table :data="props.row.gasTypeEmissionDTOS" :show-header="false" :border="childBorder">
                    <px-table-column label="" width="47" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="220" prop="">
                      <template #default="scope">
                        <span>{{ scope.row.gasType }}排放因子：{{ scope.row.emissionFactorValue }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="150" prop="">
                      <template #default>
                        <span>tCO₂e/{{ props.row.activityLevelUnit }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="220" prop="">
                      <template #default="scope">
                        <span>排放量（tCO₂e）：{{ scope.row.carbonEmission }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                  </px-table>
                </div>
              </template>
            </px-table-column>
            <px-table-column label="设施活动" prop="facilityName">
              <template #default="scope">
                <span>{{ scope.row.facilityName }}</span>
              </template>
            </px-table-column>
            <px-table-column label="类别" prop="category">
              <template #default="scope">
                <span>{{ scope.row.category }}</span>
              </template>
            </px-table-column>
            <px-table-column label="排放因子" prop="emissionFactorName">
              <template #default="scope">
                <span>{{ scope.row.emissionFactorName }}</span>
              </template>
            </px-table-column>
            <px-table-column label="GHG种类" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.gasType }}</span>
              </template>
            </px-table-column>
            <!-- <px-table-column label="排放类别" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.emissionCategory }}</span>
              </template>
            </px-table-column> -->
            <px-table-column label="活动水平" prop="activityLevelUnit">
              <template #default="scope">
                <span>{{ scope.row.activityLevel }}{{ scope.row.activityLevelUnit }}</span>
              </template>
            </px-table-column>
            <px-table-column label="活动水平数据来源" prop="activityLevelUnit">
              <template #default="scope">
                <span>{{ scope.row.activityLevelSource }}</span>
              </template>
            </px-table-column>
            <px-table-column label="CO₂e排放因子" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.co2eFactorValue }}</span>
              </template>
            </px-table-column>
            <px-table-column label="排放总量（tCO₂e）" prop="totalCarbonEmission">
              <template #default="scope">
                <span>{{ scope.row.totalCarbonEmission }}</span>
              </template>
            </px-table-column>
            <px-table-column label="环比" prop="monthOnMonthRatio">
              <template #default="scope">
                <span>{{ scope.row.monthOnMonthRatio ? `${scope.row.monthOnMonthRatio}%` : "-" }}</span>
              </template>
            </px-table-column>
          </px-table>
        </div>
        <div v-if="activeName2 == 'three'">
          <px-tabs v-model="activeName" class="equipment-tabs" @tab-change="setLve2">
            <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="index">
              <template #label>
                <p class="pane-bottom">{{ item.name }}</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
          </px-tabs>
          <px-radio-group v-model="radio1" style="margin-top: 16px" @change="radioChange">
            <px-radio-button v-for="(items, index) in selectLv2.children" :key="index" :label="items.name" />
          </px-radio-group>
          <deatilbar
            v-for="item in selectLv3"
            :key="item.facilityId"
            :facilityId="item.facilityId"
            :name="item.facilityName"
            :estimateMonth="`${equipdata.estimateMonth}-01 00:00:00`"
          />
        </div>
      </div>
    </px-scrollbar>
    <px-scrollbar v-if="accountingVisible" class="addEquip" style="z-index: 22; min-width: 1300px; background: #f0f2f5">
      <div class="waterdom borderRidus first_width">
        <modelTitle style="width: 500px" :title="'碳排放核算结果'" />
        <div class="model_chart">
          <px-descriptions class="margin-top" style="padding: 20px 20px 0" title="" :column="2" border>
            <px-descriptions-item>
              <template #label>
                <div class="cell-item">所属厂区</div>
              </template>
              {{ accountingResult?.level }}
            </px-descriptions-item>
            <px-descriptions-item>
              <template #label>
                <div class="cell-item">核算月份</div>
              </template>
              {{ accountingResult?.estimateMonth }}
            </px-descriptions-item>
            <px-descriptions-item>
              <template #label>
                <div class="cell-item">核算模板</div>
              </template>
              {{ accountingResult?.templateName }}
            </px-descriptions-item>
            <px-descriptions-item>
              <template #label>
                <div class="cell-item">填报人员</div>
              </template>
              {{ accountingResult?.estimiateByName }}
            </px-descriptions-item>
            <px-descriptions-item>
              <template #label>
                <div class="cell-item">填报时间</div>
              </template>
              {{ accountingResult?.estimateTime }}
            </px-descriptions-item>
          </px-descriptions>
          <div class="accountingTop">
            <img class="accountingTopicon" src="@/assets/images/tanpaifangfenxi.png" />
            <p class="accountingTopp1">碳排放总量tCO₂e</p>
            <div class="accountingTopp2">
              {{ accountingResult?.totalCarbonEmission }}<span class="accountingTopp2span">吨</span>
              <p class="accountingTopp3">
                <span style="margin-left: 16px">环比</span>
                <span v-if="accountingResult?.momValue != null">
                  <span v-if="(accountingResult?.momValue != null ? accountingResult?.momValue : 0) > 0" style="margin-left: 8px; color: #f87171"
                    >{{ accountingResult?.momValue != null ? accountingResult?.momValue : 0 }}%</span
                  ><px-icon
                    v-if="(accountingResult?.momValue != null ? accountingResult?.momValue : 0) > 0"
                    color="#F87171"
                    style="font-size: 12px !important"
                  >
                    <Top /> </px-icon
                  ><px-icon
                    v-if="(accountingResult?.momValue != null ? accountingResult?.momValue : 0) >= 30"
                    color="#f59e0b"
                    style="font-size: 12px !important; cursor: pointer"
                    ><px-tooltip class="box-item" effect="dark" content="环比变化超过30%" placement="top"> <WarningFilled /> </px-tooltip
                  ></px-icon>

                  <span v-if="(accountingResult?.momValue != null ? accountingResult?.momValue : 0) <= 0" style="margin-left: 8px; color: #10b981"
                    >{{ accountingResult?.momValue != null ? accountingResult?.momValue : 0 }}%</span
                  >
                </span>
                <span v-else> --</span>
              </p>
            </div>

            <div class="fromdiv">
              <span>备注：</span>
              <px-input
                v-if="buttonTitle == '编辑'"
                v-model="equipdata.description"
                :maxlength="200"
                style="width: 580px; margin-left: 16px"
                placeholder="备注说明"
              />
              <px-input
                v-if="buttonTitle == '新增'"
                v-model="addForm.description"
                :maxlength="200"
                style="width: 580px; margin-left: 16px"
                placeholder="备注说明"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="waterdom borderRidus first_width" style="margin-top: 16px; margin-bottom: 50px">
        <px-tabs v-model="activeName2" style="margin-bottom: 16px" @tab-change="handleTabClick">
          <px-tab-pane v-for="(item, index) in tabPaneList2" :key="index" :name="item.name">
            <template #label>
              <p class="pane-bottom">{{ item.label }}</p>
              <p class="pane-line" />
            </template>
          </px-tab-pane>
        </px-tabs>
        <div v-if="activeName2 == 'first'" style="padding-bottom: 20px">
          <modelTitle style="width: 500px" :title="'温室气体碳排放统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table
                  height="368px"
                  :data="accountingResult.gasEmissionResultDTOS"
                  :summary-method="getSummaries"
                  show-summary
                  show-overflow-tooltip
                  border
                >
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.gasType }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParent :charttitle="'温室气体碳排放统计'" :chartValue="accountingResult.gasEmissionResultDTOS" style="margin-top: 16px" />
              </px-col>
            </px-row>
          </div>
          <modelTitle style="width: 500px; margin-top: 20px" :title="'排放类别统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table
                  height="448px"
                  :data="accountingResult.categoryDTOS"
                  :summary-method="getSummaries"
                  show-summary
                  show-overflow-tooltip
                  border
                >
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.category }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParentlei :charttitle="'排放类别统计'" :chartValue="accountingResult.categoryDTOS" style="margin-top: 16px" height="448px" />
              </px-col>
            </px-row>
          </div>
          <modelTitle style="width: 500px; margin-top: 20px" :title="'子排放类别统计'" />
          <div class="model_chart">
            <px-row style="height: 448px; margin-top: 16px">
              <px-col :span="16">
                <px-table
                  height="448px"
                  :data="accountingResult.childCategoryDTOS"
                  :summary-method="getSummaries"
                  show-summary
                  show-overflow-tooltip
                  border
                >
                  <!-- <px-table-column label="序号" align="center" prop="id" /> -->

                  <px-table-column label="排放类别" prop="gasType">
                    <template #default="scope">
                      <span>{{ scope.row.category }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="碳排总量（tCO₂e）" prop="carbonEmission">
                    <template #default="scope">
                      <span>{{ Number(scope.row.carbonEmission).toFixed(2) }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="占比" prop="ratio">
                    <template #default="scope">
                      <span>{{ Number(scope.row.ratio).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                  <px-table-column label="环比" prop="momValue">
                    <template #default="scope">
                      <span>{{ Number(scope.row.momValue).toFixed(2) }}%</span>
                    </template>
                  </px-table-column>
                </px-table>
              </px-col>
              <px-col :span="8">
                <chartsParentlei
                  :charttitle="'子排放类别统计'"
                  :chartValue="accountingResult.childCategoryDTOS"
                  style="margin-top: 16px"
                  height="448px"
                />
              </px-col>
            </px-row>
          </div>
        </div>
        <div v-if="activeName2 == 'two'">
          <px-tabs v-model="activeName" class="equipment-tabs" @tab-change="setLve2">
            <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="index">
              <template #label>
                <p class="pane-bottom">{{ item.name }}</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
          </px-tabs>
          <px-radio-group v-model="radio1" style="margin-top: 16px" @change="radioChange">
            <px-radio-button v-for="(items, index) in selectLv2.children" :key="index" :label="items.name" />
          </px-radio-group>
          <px-table style="margin-top: 16px" :data="selectLv3" show-overflow-tooltip border>
            <!-- <px-table-column label="序号" align="center" prop="id" /> -->
            <px-table-column type="expand">
              <template #default="props">
                <div m="4">
                  <px-table :data="props.row.gasTypeEmissionDTOS" :show-header="false" :border="childBorder">
                    <px-table-column label="" width="47" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="220" prop="">
                      <template #default="scope">
                        <span>{{ scope.row.gasType }}排放因子：{{ scope.row.emissionFactorValue }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="150" prop="">
                      <template #default>
                        <span>tCO₂e/{{ props.row.activityLevelUnit }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" width="220" prop="">
                      <template #default="scope">
                        <span>排放量（tCO₂e）：{{ scope.row.carbonEmission }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                    <px-table-column label="" prop="">
                      <template #default>
                        <span />
                      </template>
                    </px-table-column>
                  </px-table>
                </div>
              </template>
            </px-table-column>
            <px-table-column label="设施活动" prop="facilityName">
              <template #default="scope">
                <span>{{ scope.row.facilityName }}</span>
              </template>
            </px-table-column>
            <px-table-column label="类别" prop="category">
              <template #default="scope">
                <span>{{ scope.row.category }}</span>
              </template>
            </px-table-column>
            <px-table-column label="排放因子" prop="emissionFactorName">
              <template #default="scope">
                <span>{{ scope.row.emissionFactorName }}</span>
              </template>
            </px-table-column>
            <px-table-column label="GHG种类" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.gasType }}</span>
              </template>
            </px-table-column>
            <!-- <px-table-column label="排放类别" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.emissionCategory }}</span>
              </template>
            </px-table-column> -->
            <px-table-column label="活动水平" prop="activityLevelUnit">
              <template #default="scope">
                <span>{{ scope.row.activityLevel }}{{ scope.row.activityLevelUnit }}</span>
              </template>
            </px-table-column>
            <px-table-column label="活动水平数据来源" prop="activityLevelUnit">
              <template #default="scope">
                <span>{{ scope.row.activityLevelSource }}</span>
              </template>
            </px-table-column>
            <px-table-column label="CO₂e排放因子" prop="gasType">
              <template #default="scope">
                <span>{{ scope.row.co2eFactorValue }}</span>
              </template>
            </px-table-column>
            <px-table-column label="排放总量（tCO₂e）" prop="totalCarbonEmission">
              <template #default="scope">
                <span>{{ scope.row.totalCarbonEmission }}</span>
              </template>
            </px-table-column>
            <px-table-column label="环比" prop="monthOnMonthRatio">
              <template #default="scope">
                <span>{{ scope.row.monthOnMonthRatio ? `${scope.row.monthOnMonthRatio}%` : "-" }}</span>
              </template>
            </px-table-column>
          </px-table>
        </div>
        <div v-if="activeName2 == 'three'">
          <px-tabs v-model="activeName" class="equipment-tabs" @tab-change="setLve2">
            <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="index">
              <template #label>
                <p class="pane-bottom">{{ item.name }}</p>
                <p class="pane-line" />
              </template>
            </px-tab-pane>
          </px-tabs>
          <px-radio-group v-model="radio1" style="margin-top: 16px" @change="radioChange">
            <px-radio-button v-for="(items, index) in selectLv2.children" :key="index" :label="items.name" />
          </px-radio-group>
          <deatilbar
            v-for="item in selectLv3"
            :key="item.facilityId"
            :facilityId="item.facilityId"
            :name="item.facilityName"
            :estimateMonth="`${equipdata.estimateMonth}-01 00:00:00`"
          />
        </div>
      </div>
    </px-scrollbar>
    <div v-if="addVisible" class="px-dialog-footer">
      <px-button @click="equipopenDetailcancel">取消</px-button>
      <px-button type="primary" plain @click="saveDraft">保存草稿</px-button>
      <px-button type="primary" @click="accountingData">核算数据</px-button>
    </div>
    <div v-if="detailVisible" class="px-dialog-footer">
      <px-button @click="detailVisiblecancel">返回</px-button>
      <px-button type="primary" plain @click="handleDown2(equipdata.reportId)">下载报告</px-button>
    </div>
    <div v-if="accountingVisible" class="px-dialog-footer">
      <px-button @click="accountingVisiblecancel">返回修改</px-button>
      <px-button @click="handleDown2(equipdata.reportId)">下载报告</px-button>
      <px-button type="primary" @click="saveManage">保存</px-button>
    </div>
    <px-dialog v-model="dialogVisible" title="导入数据" :width="600" :before-close="handelClose">
      <div class="import-bottle">
        <div v-if="equipdata.reportId != null" class="import-bottle-title">
          上传前请先
          <span class="download" @click="handleDown(equipdata.reportId, equipdata.templateId)"> 下载模板 </span>
          ，填写完成后导入数据
        </div>
        <div v-else class="import-bottle-title">
          上传前请先
          <a :href="fsxlsx" download="核算管理导入模板.xlsx"><span class="download"> 下载模板 </span></a>
          ，填写完成后导入数据
        </div>
        <div class="import-bottle-upload">
          <importFiles
            ref="dialogSuccess"
            v-model="importFile"
            :templateId="equipdata.templateId"
            :reportId="equipdata.reportId"
            :isNotImmediateUpload="false"
            :accountingMonth="equipdata.estimateMonth ? `${equipdata.estimateMonth}-01 00:00:00` : addForm.estimateMonth"
            :uploadApi="accountingReportimportAccounting"
            @submit="submitHandler"
          />
        </div>
      </div>
    </px-dialog>
    <px-dialog v-model="dialogFilesVisible" title="结算凭证" width="600" align-center>
      <px-table :data="fileData" border show-overflow-tooltip :header-cell-style="{ background: '#e7eefb', color: '#000' }">
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="originalName" label="文件名" align="center" min-width="160">
          <template #default="scope">
            <px-button type="primary" text @click="handlePreview(scope.row)">{{ scope.row.originalName }}</px-button>
          </template>
        </px-table-column>
        <px-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="scope">
            <px-button type="primary" @click="xzpzfile(scope.row)">选择</px-button>
            <!-- <px-button link icon="Download" type="primary" @click="fileDownload(scope.row)" /> -->
            <!-- <px-tooltip content="删除" placement="top">
              <px-button link icon="Delete" type="danger" @click="fileDelete(scope.row)" />
            </px-tooltip> -->
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
    </px-dialog>
  </div>
</template>

<script setup name="Dict" lang="ts">
defineOptions({
  name: "SystemDataDict"
});
// import { router } from "@/router";
import { queryDictData } from "@/api/common";
import { accountingTemplatedetail } from "@/api/doubleCarbonManage/accountingBoundary";
import {
  accountingReportaccount,
  accountingReportaccountingResult,
  accountingReportaccountMomPercent,
  accountingReportactivityLevelSource,
  accountingReportdelete,
  accountingReportdetail,
  accountingReportedit,
  accountingReportFilterFacility,
  accountingReportimportAccounting,
  accountingReportquery,
  accountingReportsave,
  accountingReportsaveAfterAccounting,
  accountingReportsyncActivityLevelValue,
  accountingReporttemplateList,
  accountingReportvalidateTemplate
} from "@/api/doubleCarbonManage/accountingManage";
import { getCheckList } from "@/api/energy/costCheck";
import { queryListPageForOutbound } from "@/api/hazardousWasteS";
import { getToken } from "@/utils/auth";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { ArrowLeft } from "@px-ui/icons-vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import chartsParent from "./chartsParent.vue";
import chartsParentlei from "./chartsParentlei.vue";
import deatilbar from "./deatilbar.vue";
import FileUpload from "./FileUpload.vue";
import importFiles from "./importFiles.vue";
const importFile = ref<string>("");
const daoruflg = ref(false);
const submitHandler = value => {
  daoruflg.value = true;
  activeName.value = 0;
  equipdata.value.facilityDTO = value.treeDTO;
  addForm.value.accountingTemplateAndTreeDetailDTO = {
    treeDTO: equipdata.value.facilityDTO
  };
  console.log(`output->value`, value);
  console.log(`output->equipdata.value`, equipdata.value);
  tabPaneList.value = value.treeDTO.children;
  selectLv2.value = value.treeDTO.children[0];
  if (value.treeDTO.children[0].children.length > 0) {
    radio1.value = selectLv2.value?.children[0].name;
    selectLv3.value = selectLv2.value?.children[0].list;
  } else {
    radio1.value = "";
    selectLv3.value = [];
  }
};
const jibenxinxiFlg = ref(0);
const numFlg = ref(true);
const setqingdanFlg = index => {
  jibenxinxiFlg.value = index;
};
const setnumFlg = () => {
  numFlg.value = !numFlg.value;
};
const dialogSuccess = ref(null);
const dialogVisible = ref(false);
const activeName2 = ref("first");
const tabPaneList2 = [
  {
    label: "核算结果总览",
    name: "first"
  },
  {
    label: "核算结果明细",
    name: "two"
  },
  {
    label: "设施活动排放趋势",
    name: "three"
  }
];
interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}

function handleExport() {
  // const dictIds = [];
  // dictIds.push(...ids.value);
  // const params = { ids: dictIds };
  // proxy.download("post", "/operation/api/v1/water/hazardWasteOut/export", params, "危险废弃物出库.xlsx");
  dialogVisible.value = true;
}
const handelClose = done => {
  dialogVisible.value = false;
  dialogSuccess.value.successClose();
};
const handleSynchronization = () => {
  accountingReportsyncActivityLevelValue({
    accountingMonth: addForm.value.estimateMonth,
    level: addForm.value.level,
    templateId: addForm.value.templateId,
    templateName: addForm.value.templateName,
    facilityIdList: addForm.value.accountingTemplateAndTreeDetailDTO.list.map(e => e.facilityId)
  }).then(res => {
    console.log("res accountingReportsyncActivityLevelValue >>>", res);
    if (res != null) {
      activeName.value = 0;
      equipdata.value.facilityDTO = res.treeDTO;
      // addForm.value.accountingTemplateAndTreeDetailDTO = {
      //   treeDTO: equipdata.value.facilityDTO
      // };
      tabPaneList.value = res.treeDTO.children;
      selectLv2.value = res.treeDTO.children[0];
      if (res.treeDTO.children[0].children.length > 0) {
        radio1.value = res.treeDTO.children[0]?.children[0].name;
        selectLv3.value = res.treeDTO.children[0].children[0].list;
      } else {
        radio1.value = "";
        selectLv3.value = [];
      }
    } else {
    }
  });
};

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;

  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "总计";
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => Number.isNaN(value))) {
      if (index == columns.length - 2) {
        // sums[index] = `${values.reduce((prev, curr) => {
        //   const value = Number(curr);
        //   if (!Number.isNaN(value)) {
        //     return prev + curr;
        //   } else {
        //     return prev;
        //   }
        // }, 0)}%`;
        sums[index] = `100%`;
      } else if (index == columns.length - 1) {
        sums[index] = `${accountingResult.value?.momValue != null ? accountingResult.value?.momValue : "-"}%`;
      } else {
        sums[index] = `${values
          .reduce((prev, curr) => {
            const value = Number(curr);
            if (!Number.isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0)
          .toFixed(2)}`;
      }
    } else {
      sums[index] = "N/A";
    }
  });

  return sums;
};
const pzVisible = ref(false);
const fileList = ref<UploadUserFile[]>([]);

const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  fileList.value = fileList.value.slice(-3);
};
const detailVisiblecancel = () => {
  detailVisible.value = false;
};
const saveBaogao = () => {
  detailVisible.value = false;
};
const detailruleFormRef = ref();
const addchukuList = () => {
  progressVisible.value = true;
  queryParams2.value.dictWasteCode = "";
  getRukuList();
};
const fsxlsx = ref("");
onMounted(() => {
  fsxlsx.value = proxy.useGetStaticUrl(`/ifp-web-static/file/xlsx/file.xlsx`);
  if (localStorage.getItem("facList")) {
    let faclist = JSON.parse(localStorage.getItem("facList"));
    if (faclist.length == 1) {
      queryParams.value.level = faclist[0].name;
      getList();
    } else if (faclist.length == 2) {
      queryParams.value.level = faclist.filter(item => item.code == localStorage.getItem("facCode"))[0].name;
      getList();
    }
  }
});
const setactivityLevel = item => {
  setTimeout(() => {
    console.log(equipdata.value.estimateMonth);
    if (item.activityLevelSource == null) {
      item.activityLevelSource = huodongList.value[0];
    }
    accountingReportaccount({
      facilityId: item.facilityId,
      activityLevel: Number(item.activityLevel),
      level: equipdata.value.level
    }).then(res => {
      item.gasTypeEmissionDTOS = res;
      item.totalCarbonEmission = res.reduce((accumulator, currentValue) => accumulator + currentValue.carbonEmission, 0).toFixed(2);
      console.log(res);
    });
    accountingReportaccountMomPercent({
      facilityId: item.facilityId,
      activityLevel: Number(item.activityLevel),
      level: equipdata.value.level,
      accountingMonth: buttonTitle.value == "新增" ? addForm.value.estimateMonth : `${equipdata.value.estimateMonth}-01 00:00:00`,
      templateId: buttonTitle.value == "新增" ? addForm.value.templateId : equipdata.value.templateId
    }).then(res => {
      console.log(res);
      item.monthOnMonthRatio = res;
    });
  }, 200);
};
const { proxy }: any = getCurrentInstance();
function equipopenDetailcancel() {
  console.log(buttonTitle.value);
  if (buttonTitle.value == "新增") {
    PxMessageBox.confirm("<p>取消将不保存当前录入信息返回上一页</p><p>确定取消吗？</p>", "温馨提示", {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    })
      .then(async () => {
        addVisible.value = false;
        detailVisible.value = false;
        getList();
        activeName.value = 0;
      })
      .catch(() => {});
  } else {
    addVisible.value = false;
    detailVisible.value = false;
    getList();
  }
}
const typeList = ref([]);
const progressVisible = ref(false);
const accountingVisible = ref(false);
const equipopen = ref(false);
const equipopenDetail = ref(false);
const addtemplate = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const addVisible = ref(false);
const detailVisible = ref(false);
const total = ref(0);
const total2 = ref(0);
const dateRange = ref([]);
const activeName = ref(0);
const radio1 = ref("固定源");
const tabsList = [
  {
    name: "类型1",
    id: 1
  },
  {
    name: "类型2",
    id: 2
  },
  {
    name: "类型3",
    id: 3
  },
  {
    name: "类型4",
    id: 4
  }
];
const cardsList = [
  {
    name: "类型1",
    id: 1
  },
  {
    name: "类型2",
    id: 2
  },
  {
    name: "类型3",
    id: 3
  },
  {
    name: "类型4",
    id: 4
  }
];
// 图片是否上传完，是否可以保存
const buttonTitle = ref("");
const data = reactive({
  templateList: [],
  liquidList: [],
  rukuList: [],
  transportCompanyList: [],
  receiveCompanyList: [],
  typeIdList: [],
  categoryList: [],
  equipmentTypeList: [],
  positionList: [],
  selectRukuList: [],
  okselectRukuList: [],
  equipmentDeptList: [],
  modelIdList: [],
  form: {},
  addForm: {
    estimateMonth: "",
    level: "",
    templateId: "",
    accountingTemplateAndTreeDetailDTO: {},
    description: "",
    templateName: ""
  },
  wasteUnitoptions: [
    {
      value: "克",
      label: "克"
    },
    {
      value: "千克",
      label: "千克"
    },
    {
      value: "吨",
      label: "吨"
    }
  ],
  photoStatusFlag: false,
  fileStatusFlag: false,
  equipdata: {
    reportId: "",
    templateId: "",
    level: "",
    estimateMonth: "",
    accountingTemplateAndTreeDetailDTO: {},
    createByName: "",
    updateByName: "",
    description: "",
    emissionTotalDTOList: [],
    templateName: "",
    estimiateByName: "",
    estimateTime: ""
  },
  queryParams: {
    orderByColumn: "",
    isAsc: "",
    level: "",
    templateId: "",
    startDate: "",
    endDate: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 20
  },
  pzqueryParams: {
    pageNum: 1,
    pageSize: 10,
    kind: "electricity"
  },
  queryParams2: {
    orderByColumn: "",
    isAsc: "",
    dictWasteCode: "",
    startTime: "",
    endTime: "",
    status: "",
    orderBy: "",
    excludeInboundNumber: [],
    pageNum: 1,
    pageSize: 20
  },
  rules: {
    name: [{ required: true, message: "不能为空", trigger: "blur" }]
  },
  rules2: {
    estimateMonth: [{ required: true, message: "不能为空", trigger: "change" }],
    level: [{ required: true, message: "不能为空", trigger: "change" }],
    templateId: [{ required: true, message: "不能为空", trigger: "change" }]
  },
  headers: {
    Authorization: "Bearer " + getToken().accessToken || ""
  },
  moduleName: "",
  dialogImageUrl: "",
  imageVisible: false,
  selectLv2: {},
  selectLv3: [],
  tabPaneList: [],
  huodongList: [],
  accountingResult: {},
  reportId: "",
  tianbaoLoading: false,
  tableData: [],
  fileData: []
});
const {
  pzqueryParams,
  fileData,
  tableData,
  tianbaoLoading,
  reportId,
  templateList,
  rules2,
  selectLv2,
  selectLv3,
  addForm,
  liquidList,
  fileStatusFlag,
  queryParams,
  queryParams2,
  equipdata,
  rukuList,
  tabPaneList,
  huodongList,
  accountingResult
} = toRefs(data);
const getqueryCategoryList = () => {
  queryDictData({ typeCode: "factoryArea" }).then(res => {
    liquidList.value = res;
  });
  //核算模板下拉框
  accountingReporttemplateList({}).then(res => {
    templateList.value = res;
  });
  accountingReportactivityLevelSource({}).then(res => {
    huodongList.value = res;
  });
};
const dialogFilesVisible = ref(false);
const viewFileVisible = row => {
  dialogFilesVisible.value = true;
  fileData.value = row.file || [];
};
const tableLoading = ref(false);
const pztotal = ref(0);
const getpzList = async () => {
  tableLoading.value = true;
  const res: any = await getCheckList(proxy.addDateRange(pzqueryParams.value));
  tableData.value = res.data || [];
  pztotal.value = res?.total;
  tableLoading.value = false;
};
const pzitem = ref({});
const setpzfile = item => {
  console.log(item);
  pzitem.value = item;
  pzVisible.value = true;
  getpzList();
};
const tabSelectHandler = () => {
  getpzList();
};
const xzpzfile = row => {
  pzitem.value.fileDTOS = [row];
  pzVisible.value = false;
  dialogFilesVisible.value = false;
};
// 预览
const handlePreview = row => {
  if (row != null) {
    const { id, fileName, moduleName, fileType: type = "" } = row;
    // doc 暂不支持预览
    const allowType = ["txt", "docx", "xls", "xlsx", "pdf", "png", "jpg", "jpeg", "mp4"];
    if (!allowType.includes(type)) {
      PxMessage.error("暂不支持该格式文件的预览");
      return;
    }
    const path = "/fullScreen/preview";
    const query = { id, fileName, moduleName, type };
    const params = { path, query };
    const { href } = router.resolve(params);
    window.open(href, "_blank");
  } else {
    PxMessage.error("没有可以预览的文件");
  }
};
const getaccountingTemplateAndTreeDetailDTO = val => {
  tianbaoLoading.value = true;
  console.log(val);
  if (val != "") {
    accountingTemplatedetail({ id: val })
      .then(res => {
        console.log(res);
        addForm.value.accountingTemplateAndTreeDetailDTO = res;
        addForm.value.templateName = res.templateName;
        tianbaoLoading.value = false;
      })
      .catch(() => {
        tianbaoLoading.value = false;
      });
    equipdata.value.templateId = val;
  } else {
    tianbaoLoading.value = false;
  }
};

const saveManage = () => {
  console.log(reportId.value);
  accountingReportsaveAfterAccounting({
    id: reportId.value,
    description: equipdata.value.description
  }).then(res => {
    PxMessage({
      message: "保存成功",
      type: "success"
    });
    addVisible.value = false;
    accountingVisible.value = false;
    getList();
  });
};

const saveManage2 = () => {
  if (buttonTitle.value == "新增") {
    let parmas = {
      estimateMonth: addForm.value.estimateMonth,
      level: addForm.value.level,
      templateId: addForm.value.templateId,
      accountingTemplateAndTreeDetailDTO: addForm.value.accountingTemplateAndTreeDetailDTO,
      description: addForm.value.description,
      createByName: JSON.parse(localStorage.getItem("userInfo")).username,
      updateByName: JSON.parse(localStorage.getItem("userInfo")).username
    };
    accountingReportsave(parmas).then(res => {
      console.log(res);
      // addVisible.value = true;
      PxMessage({
        message: "保存成功",
        type: "success"
      });
    });
  } else {
    let parmas = {
      reportId: equipdata.value.reportId,
      estimateMonth: equipdata.value.estimateMonth,
      level: equipdata.value.level,
      templateId: equipdata.value.templateId,
      accountingTemplateAndTreeDetailDTO: {
        treeDTO: {}
      },
      description: equipdata.value.description,
      createByName: JSON.parse(localStorage.getItem("userInfo")).username,
      updateByName: JSON.parse(localStorage.getItem("userInfo")).username
    };
    parmas.accountingTemplateAndTreeDetailDTO = {
      treeDTO: equipdata.value.facilityDTO
    };
    accountingReportedit(parmas).then(res => {
      console.log(res);
      // addVisible.value = true;
      PxMessage({
        message: "保存成功",
        type: "success"
      });
    });
  }
};
// 新的文件列表
const changeFileList = val => {
  console.log(val);
  // equipdata.value.testingFile = val;
};
// 文件是否上传完，是否可以保存
const saveFileStatus = val => {
  fileStatusFlag.value = val;
};
const handledelAddPosition = () => {
  equipdata.value.content.push({
    content: "",
    qualified: 1
  });
  // positionVisible.value = true;
};

const saveDraft = () => {
  if (buttonTitle.value == "新增") {
    addTemplatenamesave(detailruleFormRef.value);
  } else {
    editorManage();
  }
};
/**
 * 筛选没有关联能源指标的活动
 */
async function filterFacility(ids: number[], noMessage?: boolean) {
  const res: any = await accountingReportFilterFacility({ facilityIdList: ids });
  if (Array.isArray(res) && res.length > 0) {
    return res;
  } else {
    if (!noMessage) {
      PxMessage({
        message: "暂无数据",
        type: "error"
      });
    }
    return [];
  }
}
const handleTabClick = async (tab, event) => {
  console.log(equipdata.value);
  if (tab === "three") {
    if (selectLv3.value.length <= 0) return;
    const ids = selectLv3.value.map(e => e.facilityId);
    await filterFacility(ids);
  }
};
const accountingFun = () => {
  accountingflg.value = true;
  let parmas = {
    estimateMonth: addForm.value.estimateMonth,
    level: addForm.value.level,
    templateId: addForm.value.templateId,
    accountingTemplateAndTreeDetailDTO: {
      treeDTO: {}
    },
    description: addForm.value.description,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username,
    reportId: reportId.value
  };
  if (daoruflg.value) {
    parmas.accountingTemplateAndTreeDetailDTO = {
      treeDTO: equipdata.value.facilityDTO
    };
  } else {
    parmas.accountingTemplateAndTreeDetailDTO = addForm.value.accountingTemplateAndTreeDetailDTO;
  }
  accountingReportaccountingResult(parmas)
    .then(res => {
      console.log(res);
      accountingResult.value = res;
      reportId.value = res.reportId;
      handleEditor(res.reportId);
      addVisible.value = false;
      accountingVisible.value = true;
      accountingflg.value = false;
    })
    .catch(err => {
      accountingflg.value = false;
    });
};
const accountingFun2 = () => {
  accountingflg.value = true;
  let parmas = {
    reportId: equipdata.value.reportId,
    estimateMonth: equipdata.value.estimateMonth,
    level: equipdata.value.level,
    templateId: equipdata.value.templateId,
    accountingTemplateAndTreeDetailDTO: {
      treeDTO: {}
    },
    description: equipdata.value.description,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username
  };
  parmas.accountingTemplateAndTreeDetailDTO = {
    treeDTO: equipdata.value.facilityDTO
  };
  equipdata.value.facilityDTO;
  accountingReportaccountingResult(parmas)
    .then(res => {
      console.log(res);
      accountingResult.value = res;
      reportId.value = res.reportId;
      addVisible.value = false;
      accountingVisible.value = true;
      accountingflg.value = false;
    })
    .catch(err => {
      accountingflg.value = false;
    });
};
const accountingflg = ref(false);
const accountingData = () => {
  console.log(buttonTitle.value);
  activeName2.value = "first";
  if (buttonTitle.value == "新增") {
    if (saveFlg(addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO)) {
      accountingFun();
    } else {
      PxMessageBox.confirm("<p>有未填报的活动水平数据，</p><p>确定跳过继续核算？</p>", "温馨提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true
      })
        .then(async () => {
          accountingFun();
        })
        .catch(() => {});
    }
  } else {
    if (saveFlg(equipdata.value.facilityDTO)) {
      accountingFun2();
    } else {
      PxMessageBox.confirm("<p>有未填报的活动水平数据，</p><p>确定跳过继续核算？</p>", "温馨提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true
      })
        .then(async () => {
          accountingFun2();
        })
        .catch(() => {});
    }
  }
};
const downbaogao = () => {
  PxMessage({
    message: "暂无此功能",
    type: "error"
  });
};
function saveFlg(arr) {
  // for (const item of arr) {
  //   if (item.level == "" || item.initialQuota == null || item.tradeQuota == null || item.ccerValue == null || item.ccerOffsetRatio == null) {
  //     return false;
  //   }
  //   return true;
  // }

  let state = true;
  if (arr.children.length > 0) {
    for (const item of arr.children) {
      if (item.children.length > 0) {
        for (const items of item.children) {
          if (items.list.length > 0) {
            for (const itemss of items.list) {
              if (itemss.activityLevelSource == null) {
                state = false;
              }
              if (itemss.activityLevel == null) {
                state = false;
              }
              if (itemss.activityLevelSource == "") {
                state = false;
              }
              if (itemss.activityLevel == "") {
                state = false;
              }
              // else{
              //   state = true
              // }
            }
          }
        }
      }
    }
  }
  return state;
}

const accountingVisiblecancel = () => {
  addVisible.value = true;
  accountingVisible.value = false;
};
getqueryCategoryList();
function getRukuList() {
  loading.value = true;
  if (dateRange.value != null) {
    queryParams2.value.startTime = dateRange.value[0];
    queryParams2.value.endTime = dateRange.value[1];
  } else {
    queryParams2.value.startTime = "";
    queryParams2.value.endTime = "";
  }
  queryParams2.value.excludeInboundNumber = equipdata.value.details.map(item => item.inboundNumber);

  queryListPageForOutbound(queryParams2.value).then((response: any) => {
    rukuList.value = response.data;
    total2.value = response.total;
    loading.value = false;
  });
}

function getList() {
  loading.value = true;
  console.log(dateRange.value);
  if (dateRange.value != null) {
    queryParams.value.startDate = dateRange.value[0];
    queryParams.value.endDate = dateRange.value[1];
  } else {
    queryParams.value.startDate = "";
    queryParams.value.endDate = "";
  }

  accountingReportquery(queryParams.value).then((response: any) => {
    typeList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    orderByColumn: "",
    isAsc: "",
    level: "",
    templateId: "",
    startDate: "",
    endDate: "",
    orderBy: ""
  };
  if (localStorage.getItem("facList")) {
    let faclist = JSON.parse(localStorage.getItem("facList"));
    if (faclist.length == 1) {
      queryParams.value.level = faclist[0].name;
    } else if (faclist.length == 2) {
      queryParams.value.level = faclist.filter(item => item.code == localStorage.getItem("facCode"))[0].name;
    }
  }
  dateRange.value = [];
  handleQuery("reset");
}
const handleDown = async (reportId, templateIdval) => {
  proxy.download(
    "post",
    "/energy/accountingReport/export",
    {
      id: reportId,
      templateId: templateIdval
    },
    "核算管理导入模板.xlsx"
  );
};
const handleDown2 = async val => {
  proxy.download("post", "/energy/emissionReport/download", { reportId: val }, "碳排放报告.xlsx");
};
const addTemplatename = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      reportId.value = "";
      if (localStorage.getItem("facList")) {
        let faclist = JSON.parse(localStorage.getItem("facList"));
        if (faclist.length == 1) {
          addForm.value.level = faclist[0].name;
        } else if (faclist.length == 2) {
          addForm.value.level = faclist.filter(item => item.code == localStorage.getItem("facCode"))[0].name;
        }
      }

      accountingReportvalidateTemplate({
        estimateMonth: addForm.value.estimateMonth,
        level: addForm.value.level,
        templateId: addForm.value.templateId,
        accountingTemplateAndTreeDetailDTO: addForm.value.accountingTemplateAndTreeDetailDTO,
        description: addForm.value.description,
        createByName: JSON.parse(localStorage.getItem("userInfo")).username,
        updateByName: JSON.parse(localStorage.getItem("userInfo")).username
      }).then(res => {
        if (res == "SUCCESS") {
          tabPaneList.value = addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO.children;
          selectLv2.value = addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO.children[0];
          if (addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO.children[0]?.children[0]?.name) {
            radio1.value = addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO.children[0].children[0].name;
            selectLv3.value = addForm.value.accountingTemplateAndTreeDetailDTO.treeDTO.children[0].children[0].list;
          }

          tianbaoLoading.value = false;
          addVisible.value = true;
          addtemplate.value = false;
        }
        tianbaoLoading.value = false;
      });
      tianbaoLoading.value = false;
    }
  });
};

const editorManage = () => {
  // console.log(equipdata.value);
  let parmas = {
    reportId: equipdata.value.reportId,
    estimateMonth: equipdata.value.estimateMonth,
    level: equipdata.value.level,
    templateId: equipdata.value.templateId,
    accountingTemplateAndTreeDetailDTO: {
      treeDTO: {}
    },
    description: equipdata.value.description,
    createByName: JSON.parse(localStorage.getItem("userInfo")).username,
    updateByName: JSON.parse(localStorage.getItem("userInfo")).username
  };
  parmas.accountingTemplateAndTreeDetailDTO = {
    treeDTO: equipdata.value.facilityDTO
  };
  accountingReportedit(parmas).then(res => {
    addVisible.value = false;
    detailVisible.value = false;
    // addVisible.value = true;
    PxMessage({
      message: "保存成功",
      type: "success"
    });
    getList();
  });
};

const maplist = [
  {
    type: "类别一：直接排放",
    CO2: 1,
    CH4: 1,
    N2O: 1,
    HFCs: 1,
    PFCs: 1,
    SF6: 1,
    NF3: 1,
    tCO2e: 1,
    zhanbi: 1
  }
];

const addTemplatenamesave = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      console.log("addForm.value >>>", addForm.value);
      if (daoruflg.value) {
        let parmas = {
          estimateMonth: addForm.value.estimateMonth,
          level: addForm.value.level,
          templateId: addForm.value.templateId,
          accountingTemplateAndTreeDetailDTO: {
            treeDTO: {}
          },
          description: addForm.value.description,
          createByName: JSON.parse(localStorage.getItem("userInfo")).username,
          updateByName: JSON.parse(localStorage.getItem("userInfo")).username
        };
        parmas.accountingTemplateAndTreeDetailDTO = {
          treeDTO: equipdata.value.facilityDTO
        };
        accountingReportsave(parmas).then(res => {
          // addVisible.value = true;
          PxMessage({
            message: "保存成功",
            type: "success"
          });
          // handleEditor(res.id);
          addVisible.value = false;
          detailVisible.value = false;
          getList();
          daoruflg.value = false;
        });
      } else {
        let parmas = {
          estimateMonth: addForm.value.estimateMonth,
          level: addForm.value.level,
          templateId: addForm.value.templateId,
          accountingTemplateAndTreeDetailDTO: addForm.value.accountingTemplateAndTreeDetailDTO,
          description: addForm.value.description,
          createByName: JSON.parse(localStorage.getItem("userInfo")).username,
          updateByName: JSON.parse(localStorage.getItem("userInfo")).username
        };
        accountingReportsave(parmas).then(res => {
          // addVisible.value = true;
          PxMessage({
            message: "保存成功",
            type: "success"
          });
          // handleEditor(res.id);
          addVisible.value = false;
          detailVisible.value = false;
          getList();
          daoruflg.value = false;
        });
      }
    }
  });
};
/** 新增按钮操作 */
function handleAdd() {
  buttonTitle.value = "新增";
  addtemplate.value = true;
  detailruleFormRef.value.resetFields();
  equipdata.value.reportId = "";
  equipdata.value.templateId = "";
  if (localStorage.getItem("facList")) {
    let faclist = JSON.parse(localStorage.getItem("facList"));
    if (faclist.length == 1) {
      addForm.value.level = faclist[0].name;
    } else if (faclist.length == 2) {
      addForm.value.level = faclist.filter(item => item.code == localStorage.getItem("facCode"))[0].name;
    }
  }
  reportId.value = "";
}
const handleDetail = async val => {
  buttonTitle.value = "详情";
  const data = await accountingReportdetail({ id: val });

  // equipopen.value = true;
  // // equipopenDetail.value = true;
  // fromdisable.value = true;
  equipdata.value = data;
  activeName.value = 0;
  activeName2.value = "first";
  detailVisible.value = true;
  tabPaneList.value = equipdata.value.facilityDTO.children;
  selectLv2.value = equipdata.value.facilityDTO.children[0];
  radio1.value = equipdata.value.facilityDTO.children[0].children[0].name ? equipdata.value.facilityDTO.children[0].children[0].name : "";
  // let ids = equipdata.value.facilityDTO.children[0].children[0].list.map(item => item.facilityId);
  // await filterFacility(ids, true);
  selectLv3.value = equipdata.value.facilityDTO.children[0].children[0].list;
};
const setLve2 = async val => {
  selectLv2.value = tabPaneList.value[val];
  if (selectLv2.value.children.length > 0) {
    radio1.value = selectLv2.value.children[0].name;
    // console.log(radio1.value);
    if (detailVisible.value && activeName2.value === "three") {
      let ids = selectLv2.value.children[0].list.map(item => item.facilityId);
      await filterFacility(ids);
    }
    selectLv3.value = selectLv2.value.children[0].list;
    // saveManage2();
  } else {
    radio1.value = "";
    selectLv3.value = [];
    // saveManage2();
  }
};
const radioChange = async val => {
  if (activeName2.value === "three") {
    let ids = selectLv2.value?.children.filter(item => item.name == val)[0].list.map(item => item.facilityId);
    await filterFacility(ids);
  }
  selectLv3.value = selectLv2.value?.children.filter(item => item.name == val)[0].list;
  // saveManage2();
};
const handleEditor = async val => {
  buttonTitle.value = "编辑";
  // jibenxinxiFlg.value = true;
  // jiqicanshuFlg.value = true;
  // shebeitaizhangFlg.value = true;
  // moxingshezhiFlg.value = true;
  activeName.value = 0;
  const data = await accountingReportdetail({ id: val });
  // fromdisable.value = false;
  equipdata.value = data;
  tabPaneList.value = equipdata.value.facilityDTO.children;
  selectLv2.value = equipdata.value.facilityDTO.children[0];
  if (equipdata.value.facilityDTO.children[0].children.length > 0) {
    radio1.value = equipdata.value.facilityDTO.children[0]?.children[0].name;
    selectLv3.value = equipdata.value.facilityDTO.children[0].children[0].list;
  } else {
    radio1.value = "";
    selectLv3.value = [];
  }
  // console.log(`output->tabPaneList.value`, tabPaneList.value);
  // console.log(`output->selectLv2.value`, selectLv2.value);
  // console.log(`output->selectLv3.value`, selectLv3.value);
  // console.log(`output->radio1.value`, radio1.value);
  addVisible.value = true;
};

/** 删除按钮操作 */
function handleDelete(row) {
  PxMessageBox.confirm("是否确认删除？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "px-button--danger",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      accountingReportdelete({ id: row.id }).then(res => {
        PxMessage({
          message: "删除成功",
          type: "success"
        });
        getList();
      });
    })
    .catch(() => {});
}
</script>
<style scoped lang="scss">
.addEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.editorEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2002;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}

.card-header {
  min-height: 40px;
  padding: 14px 15px 7px !important;
  cursor: pointer;
  user-select: none;
  background: #e7eefb;
}

.card-title {
  float: left;
  line-height: 14px;
}

.card-main {
  float: left;
  margin: -3px 8px 0 5px;
  cursor: pointer;
}

.box-card1 {
  width: 100%;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card2 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card3 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card4 {
  width: calc(100% - 48px);
  height: 261px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.demo-form-inline {
  .px-input {
    --px-input-width: calc(100% - 70px);
  }

  .px-form-item {
    width: 100%;
  }

  .px-textarea__inner {
    width: calc(100% - 100px) !important;
  }

  .px-form-item__label {
    font-weight: 400 !important;
  }
}

.form-div {
  padding: 24px;
  padding-bottom: 0;

  .px-row {
    margin-bottom: 16px;
  }
}

.px-icon {
  font-size: 16px !important;
}

:deep(.px-tabs--top .px-tabs__item.is-top.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

:deep(.px-tabs .px-tabs__item) {
  .pane-bottom {
    line-height: 30px;
  }
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

:deep(.custom-form-ui .px-form-item) {
  width: 250px !important;
}

.filename {
  position: absolute;
  bottom: -30px;
  width: 96px;
  overflow: hidden;
  color: rgb(166 167 172);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  width: 166px;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
}

:deep(.px-descriptions__body .px-descriptions__table.is-bordered .px-descriptions__cell) {
  border: 1px solid #dfdfdf;
}

.cell-item {
  text-align: right;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 13px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}

.mainlist {
  width: 100%;
  padding-bottom: 15px;

  .mainlistTop {
    position: relative;
    width: 100%;
    font-size: 14px;
  }

  .mainlistTopp {
    position: absolute;
    top: 2px;
    left: 20px;
  }
}

.mianListbottom {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: -8px;
  margin-left: 8px;
}

.mianListbottomp {
  width: 20px;
  height: 37px;
  border-bottom: 1px solid#3B82F6;
  border-left: 1px solid#3B82F6;
}

.mianListbottomp2 {
  position: absolute;
  top: 26px;
  left: 28px;
  width: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
}

.accountingTop {
  position: relative;
  width: 100%;
  height: 96px;
  border-bottom: 1px solid #ebebeb;

  .accountingTopicon {
    position: absolute;
    top: 28px;
    left: 24px;
    width: 48px;
    height: 48px;
  }

  .accountingTopp1 {
    position: absolute;
    top: 37px;
    left: 95px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #000;
  }

  .accountingTopp2 {
    position: absolute;
    top: 37px;
    left: 256px;
    font-size: 24px;
    font-weight: 600;
    line-height: 22px;
    color: #3b82f6;

    .accountingTopp2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 18px;
      font-weight: 400;
      line-height: 25px;
      color: #4f4f4f;
    }
  }

  .accountingTopp3 {
    float: right;
    // position: absolute;
    // top: 38px;
    // left: 368px;
    font-size: 14px;
    line-height: 22px;
    color: #000;
  }

  .fromdiv {
    position: absolute;
    top: 37px;
    left: 640px;
    height: 40px;
    font-size: 14px;
  }
}

.accountingbottom {
  position: relative;
  width: 100%;
  height: 116px;
}

.accountingbottomList {
  position: relative;
  float: left;
  width: 14.285%;
  height: 82px;
  padding-left: 20px;
  margin-top: 24px;

  &:nth-child(n + 1) {
    padding-left: 64px;

    .p1 {
      left: 64px;
    }

    .p2 {
      left: 64px;
    }
  }

  .p1 {
    position: absolute;
    top: 0;
    left: 20px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
  }

  .p2 {
    position: absolute;
    top: 24px;
    left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .p2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #4f4f4f;
    }
  }

  .p3 {
    position: absolute;
    top: 62px;
    font-size: 14px;
  }

  .p4 {
    position: absolute;
    top: 15px;
    right: 0;
    width: 1px;
    height: 22px;
    background: #ebebeb;
  }
}

.lastaccountingbottom {
  width: 14.285%;
  padding-left: 64px;

  .p1 {
    left: 64px;
  }

  .p2 {
    left: 64px;
  }
}

.detailP {
  margin: 10px 0 10px 20px;
  font-size: 16px;
  // font-weight: 600;
}

.import-bottle {
  .import-bottle-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 16px;
    margin-bottom: 24px;
    line-height: 1;
    color: #333;
    background-color: #fef5e6;
    border: 1px solid #f7b648;
    border-radius: 6px;

    .download {
      color: #3b82f6;
      cursor: pointer;
    }
  }

  .import-bottle-upload {
    width: 100%;
  }
}
</style>
